<template>
  <div class="ticket-container" v-loading="loading">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span>当前位置：</span>
      <el-breadcrumb separator=">" class="inline-breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/matches' }">门票预订</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/matches' }">村BA中国门票</el-breadcrumb-item>
        <el-breadcrumb-item>{{ match.homeTeamName }} VS {{ match.awayTeamName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <!-- 比赛信息卡片 -->
    <div class="match-info-box">
      <div class="match-title">
        <h2>[村BA中国] {{ match.homeTeamName }} VS {{ match.awayTeamName }}</h2>
        <span class="status-tag">{{ getStatusText(match.status) }}</span>
      </div>
      
      <div class="match-basic-info">
        <div class="match-time">{{ match.matchTime }} | {{ match.venueCity }} | {{ match.venueName }}</div>
        <div class="match-teams">
          <div class="team-info">
            <img :src="`http://localhost:8088/api/file/get/${match.homeTeamLogo}`" class="team-logo">
            <span>{{ match.homeTeamName }}</span>
          </div>
          <div class="vs">VS</div>
          <div class="team-info">
            <img :src="`http://localhost:8088/api/file/get/${match.awayTeamLogo}`" class="team-logo">
            <span>{{ match.awayTeamName }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧场馆信息 -->
      <div class="venue-section">
        <div class="venue-map">
          <img :src="`http://localhost:8088/api/file/get/${match.venueImage}`" alt="场馆图片">
        </div>
        <div class="venue-info">
          <h3>{{ match.venueName }}</h3>
          <p><i class="el-icon-location"></i> {{ match.venueCity }} {{ match.venueAddress }}</p>
          <div class="section-legend">
            <div v-for="section in match.venueSections" :key="section.id" class="legend-item">
              <div class="color-block" :class="section.name.toLowerCase()"></div>
              <span>{{ section.name }} ({{ section.availableSeats }}/{{ section.capacity }})</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧票价信息 -->
      <div class="ticket-section">
        <div class="ticket-type-header">
          <h3>门票信息</h3>
          <span class="ticket-note">请选择合适的票价</span>
        </div>
        
        <div class="ticket-list">
          <div v-for="price in match.ticketPrices" :key="price.id" class="ticket-item">
            <div class="ticket-info">
              <div class="ticket-name">{{ price.sectionName }}</div>
              <div class="ticket-seats">剩余座位: {{ price.availableSeats }}</div>
              <div class="ticket-delivery">电子票 / 全票价 / 电子配送</div>
            </div>
            <div class="ticket-price">
              <div class="price">¥{{ price.price }}</div>
              <el-button 
                type="warning" 
                size="small" 
                @click="handleBuyTicket(price)"
                :disabled="price.availableSeats <= 0">
                {{ price.availableSeats <= 0 ? '售罄' : '预订' }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息标签页 -->
    <div class="bottom-tabs">
      <el-tabs type="border-card">
        <el-tab-pane label="购票流程">
          <div class="process-content">
            <div class="process-step">
              <div class="step-number">1</div>
              <div class="step-info">
                <h4>选择场次和票价</h4>
                <p>根据比赛时间和预算选择合适的场次和票价</p>
              </div>
            </div>
            <div class="process-step">
              <div class="step-number">2</div>
              <div class="step-info">
                <h4>确认订单信息</h4>
                <p>核对比赛信息、座位区域和票价</p>
              </div>
            </div>
            <div class="process-step">
              <div class="step-number">3</div>
              <div class="step-info">
                <h4>在线支付</h4>
                <p>支持多种支付方式，安全便捷</p>
              </div>
            </div>
            <div class="process-step">
              <div class="step-number">4</div>
              <div class="step-info">
                <h4>收取电子票</h4>
                <p>支付成功后电子票将发送至您的邮箱</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="购票须知">
          <div class="notice-content">
            <h4>重要提示</h4>
            <ul>
              <li>每个账号限购4张门票</li>
              <li>门票一经售出，不支持退换</li>
              <li>请确保预留的联系方式准确无误</li>
              <li>演出前请注意查收电子票</li>
            </ul>
            
            <h4>入场须知</h4>
            <ul>
              <li>请提前30分钟到达现场</li>
              <li>需要携带身份证件核验</li>
              <li>禁止携带食品、饮料等物品入场</li>
              <li>请遵守场馆秩序，文明观赛</li>
            </ul>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="常见问题">
          <div class="faq-content">
            <div class="faq-item">
              <h4>Q: 购买成功后多久可以收到电子票？</h4>
              <p>A: 支付成功后，电子票将在15分钟内发送至您的邮箱。</p>
            </div>
            <div class="faq-item">
              <h4>Q: 可以选择座位吗？</h4>
              <p>A: 目前仅支持选择区域，具体座位号系统将自动分配。</p>
            </div>
            <div class="faq-item">
              <h4>Q: 如何修改订单信息？</h4>
              <p>A: 订单提交后将无法修改，请下单时仔细核对信息。</p>
            </div>
            <div class="faq-item">
              <h4>Q: 门票可以转让吗？</h4>
              <p>A: 门票不支持转让，请确认后再购买。</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 购票对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false">
      
      <!-- 步骤条 -->
      <el-steps :active="orderStep" finish-status="success" align-center>
        <el-step title="填写信息"></el-step>
        <el-step title="确认支付"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- 填写信息步骤 -->
      <div v-if="orderStep === 1" class="order-form">
        <el-form ref="orderForm" :model="orderForm" :rules="rules" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="orderForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="orderForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="orderForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-form>
        <div class="order-info">
          <h4>订单信息</h4>
          <p>比赛: {{ match.homeTeamName }} VS {{ match.awayTeamName }}</p>
          <p>时间: {{ match.matchTime }}</p>
          <p>场馆: {{ match.venueName }}</p>
          <p>区域: {{ selectedSection }}</p>
          <p class="price">总金额: ¥{{ selectedPrice }}</p>
        </div>
      </div>

      <!-- 支付步骤 -->
      <div v-if="orderStep === 2" class="payment-form">
        <div class="payment-amount">
          <span>支付金额</span>
          <span class="amount">¥{{ selectedPrice }}</span>
        </div>
        <div class="payment-method">
          <h4>选择支付方式</h4>
          <el-radio-group v-model="paymentMethod">
            <el-radio label="wechat">
              <i class="el-icon-money" style="color: #67C23A"></i> 微信支付
            </el-radio>
            <el-radio label="alipay">
              <i class="el-icon-money" style="color: #409EFF"></i> 支付宝支付
            </el-radio>
          </el-radio-group>
        </div>
        <div class="payment-password">
          <el-form ref="payForm" :model="payForm" :rules="payRules">
            <el-form-item prop="password">
              <el-input 
                type="password" 
                v-model="payForm.password"
                placeholder="请输入支付密码"
                show-password>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 完成步骤 -->
      <div v-if="orderStep === 3" class="success-info">
        <i class="el-icon-success" style="font-size: 50px; color: #67C23A"></i>
        <h3>购票成功!</h3>
        <p>电子票将发送至您的邮箱: {{ orderForm.email }}</p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" v-if="orderStep === 3">关闭</el-button>
        <el-button @click="prevStep" v-if="orderStep === 2">上一步</el-button>
        <el-button type="primary" @click="nextStep" v-if="orderStep === 1">下一步</el-button>
        <el-button type="primary" @click="handlePayment" v-if="orderStep === 2">确认支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      loading: false,
      matchId: null,
      match: {},
      ticketPrices: [],
      dialogVisible: false,
      selectedSection: '',
      selectedPrice: 0,
      selectedTicket: null,
      orderStep: 1,
      orderForm: {
        name: '',
        phone: '',
        email: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
        ]
      },
      paymentMethod: 'wechat',
      payForm: {
        password: ''
      },
      payRules: {
        password: [
          { required: true, message: '请输入支付密码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.matchId = this.$route.params.id
    this.fetchMatchDetail()
    this.fetchTicketPrices()
  },
  methods: {
    nextStep() {
      this.orderStep++
    },
    prevStep() {
      this.orderStep--
    },
    async fetchMatchDetail() {
      this.loading = true
      try {
        const res = await request({
          url: `/api/matches/${this.matchId}`,
          method: 'get'
        })
        
        if (res.code === 200) {
          this.match = res.data
        } else {
          this.$message.error(res.msg || '获取比赛详情失败')
        }
      } catch (error) {
        console.error('获取比赛详情失败', error)
        this.$message.error('获取比赛详情失败')
      } finally {
        this.loading = false
      }
    },
    async fetchTicketPrices() {
      try {
        const res = await request({
          url: `/api/tickets/prices/${this.matchId}`,
          method: 'get'
        })
        
        if (res.code === 200) {
          this.ticketPrices = res.data
        } else {
          this.$message.error(res.msg || '获取票价信息失败')
        }
      } catch (error) {
        console.error('获取票价信息失败', error)
        this.$message.error('获取票价信息失败')
      }
    },
    getStatusText(status) {
      const statusMap = {
        'SCHEDULED': '未开始',
        'ONGOING': '进行中',
        'FINISHED': '已结束',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },
    handleBuyTicket(price) {
      this.selectedTicket = price
      this.selectedSection = price.sectionName
      this.selectedPrice = price.price
      this.dialogVisible = true
    },
    async handlePayment() {
      if (this.payForm.password !== '9999') {
        this.$message.error('支付密码错误')
        return
      }

      try {
        const orderData = {
          matchId: this.matchId,
          sectionId: this.selectedTicket.sectionId,
          priceId: this.selectedTicket.id,
          name: this.orderForm.name,
          phone: this.orderForm.phone,
          email: this.orderForm.email
        }

        const res = await request({
          url: '/api/tickets/order',
          method: 'post',
          data: orderData
        })

        if (res.code === 200) {
          // 支付订单
          const payRes = await request({
            url: `/api/tickets/pay/${res.data}`,
            method: 'post'
          })

          if (payRes.code === 200) {
            this.orderStep = 3
            this.$message.success('支付成功!')
          } else {
            this.$message.error(payRes.msg || '支付失败')
          }
        }
      } catch (error) {
        console.error('购票失败', error)
        this.$message.error('购票失败')
      }
    }
  }
}
</script>

<style scoped>
.ticket-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.breadcrumb {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.inline-breadcrumb {
  display: inline-block;
}

.match-info-box {
  border: 1px solid #e74c3c;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fff;
}

.match-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.match-title h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.status-tag {
  background-color: #e74c3c;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 10px;
}

.match-basic-info {
  color: #666;
  font-size: 14px;
}

.match-time {
  margin-bottom: 10px;
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.vs {
  margin: 0 30px;
  font-size: 24px;
  font-weight: bold;
  color: #e74c3c;
}

.section-legend {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.color-block {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 4px;
}

.color-block.vip {
  background-color: #ff5722;
}

.color-block.a {
  background-color: #ff9800;
}

.color-block.b {
  background-color: #4caf50;
}

.ticket-seats {
  font-size: 12px;
  color: #666;
  margin: 5px 0;
}

.price {
  font-size: 20px;
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 10px;
}

.main-content {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.venue-section {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}

.ticket-section {
  flex: 1;
  background: #fff;
  border-radius: 4px;
}

.venue-map img {
  width: 100%;
  border-radius: 4px;
}

.venue-info {
  margin-top: 15px;
}

.venue-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.venue-info p {
  margin: 5px 0;
  color: #666;
}

.ticket-type-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.ticket-type-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.ticket-note {
  margin-left: 10px;
  color: #28a745;
  font-size: 14px;
}

.ticket-list {
  padding: 0 15px;
}

.ticket-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.ticket-item:last-child {
  border-bottom: none;
}

.ticket-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.ticket-delivery {
  font-size: 12px;
  color: #999;
}

.ticket-price {
  text-align: right;
}

.bottom-tabs {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.process-content {
  padding: 20px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.step-number {
  width: 30px;
  height: 30px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.step-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.step-info p {
  margin: 0;
  color: #666;
}

.notice-content {
  padding: 20px;
}

.notice-content h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.notice-content ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
  color: #666;
}

.notice-content li {
  margin-bottom: 5px;
}

.faq-content {
  padding: 20px;
}

.faq-item {
  margin-bottom: 20px;
}

.faq-item h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.faq-item p {
  margin: 0;
  color: #666;
}

.order-form {
  padding: 20px;
}

.order-info {
  margin-top: 20px;
}

.order-info h4 {
  margin-bottom: 10px;
  color: #333;
}

.payment-form {
  padding: 20px;
}

.payment-amount {
  margin-bottom: 20px;
}

.payment-amount span {
  font-size: 14px;
  color: #666;
}

.amount {
  font-size: 20px;
  color: #e74c3c;
  font-weight: bold;
}

.payment-method {
  margin-bottom: 20px;
}

.payment-password {
  margin-bottom: 20px;
}

.success-info {
  padding: 20px;
  text-align: center;
}

.success-info i {
  margin-bottom: 10px;
}

.success-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.success-info p {
  margin: 0;
  color: #666;
}
</style>